<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" th:href="@{/component/pear/css/pear.css}" />
        <script th:src="@{/component/layui/layui.js}"></script>
        <script th:src="@{/component/pear/pear.js}"></script>
    </head>
    <body class="pear-container">

    <!--定义表格-->
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="menu-table" lay-filter="menu-table">
                </table>
            </div>
        </div>

    <!--定义表格上的添加按钮-->
        <script type="text/html" id="menu-toolbar">
            <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add" sec:authorize="${hasAnyAuthority('menu:add')}">
                <i class="layui-icon layui-icon-add-1"></i>
                新增
            </button>
        </script>

    <!--定义表格的编辑和删除按钮-->
        <script type="text/html" id="menu-bar">
            <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit" sec:authorize="${hasAnyAuthority('menu:update')}"><i class="layui-icon layui-icon-edit"></i></button>
            <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove" sec:authorize="${hasAnyAuthority('menu:del')}"><i class="layui-icon layui-icon-delete"></i></button>
        </script>



        <script>
            layui.use(['table','form','jquery','treetable'],function () {
                let table = layui.table;
                let form = layui.form;
                let $ = layui.jquery;
                let treeTable = layui.treetable;

                treeTable.render({
                    treeColIndex: 1,
                    treeSpid: 0,
                    treeIdName: 'id',
                    treePidName: 'parentId',
                    treeDefaultClose: true,
                    skin:'line',
                    method:'get',
                    toolbar:'#menu-toolbar',
                    elem: '#menu-table',
                    // ajax 请求的路径
                    url: '/sys/menu/list',
                    // 关闭分页功能
                    page: false,
                    cols: [
                        [
                            {type: 'radio'},
                            {field: 'title', minWidth: 200, title: '菜单标题'},
                            {field: 'icon', title: '图标'},
                            {field: 'href', title: '路径'},
                            {field: 'permission', title: '权限标识'},
                            {field: 'type', title: '类型'},
                            {title: '操作',templet: '#menu-bar', width: 150, align: 'center'}
                        ]
                    ]
                });

                table.on('tool(menu-table)',function(obj){
                    if (obj.event === 'remove') {
                        window.remove(obj);
                    } else if (obj.event === 'edit') {
                        window.edit(obj);
                    }
                })


                table.on('toolbar(menu-table)', function(obj){
                    if(obj.event === 'add'){
                        window.add();
                    } else if(obj.event === 'refresh'){
                        window.refresh();
                    }
                });


                window.add = function(){
                    layer.open({
                        type: 2,
                        title: '新增',
                        shade: 0.1,
                        area: ['450px', '500px'],
                        content: '/sys/menu/add'
                    });
                }

                window.edit = function(obj){
                    var data = obj.data;
                    layer.open({
                        type: 2,
                        title: '修改',
                        shade: 0.1,
                        area: ['450px', '500px'],
                        content: '/sys/menu/update/?id='+data.id
                    });
                }
                window.remove = function(obj){
                    var data = obj.data;
                    layer.confirm('确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！', {icon: 3, title:'提示'}, function(index){
                        layer.close(index);
                        let loading = layer.load();
                        $.ajax({
                            url: "/sys/menu?id=" + data.id,
                            dataType:'json',
                            type:'delete',
                            success:function(result){
                                layer.close(loading);
                                if(result.success){
                                    layer.msg(result.msg,{icon:1,time:1000},function(){
                                        obj.del();
                                    });
                                }else{
                                    layer.msg(result.msg,{icon:2,time:1000});
                                }
                            }
                        })
                    });
                }
            })
        </script>
    </body>
</html>